<template>
  <el-row :gutter="30" align="middle" justify="start">
    <el-col :span="8" style="text-align: left" @click="goHome" >
      <template class="logo-box">
        <img :src="require('@/assets/logo2.png')" class="logo-img" alt="智慧农场商贸平台"/>
        <span class="logo-text">智慧农场商贸平台</span>
      </template>
    </el-col>
    <el-col :span="8">
      <SearchBar></SearchBar>
    </el-col>
    <el-col :span="8">
      <div class="user-bar">
        <el-dropdown trigger="click" style="margin-right: 50px" :key="userInfo">
              <span class="el-dropdown-link">{{getNickName()}}
                <el-icon><arrow-down/></el-icon>
              </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="()=>{this.dialogFormVisible = true}" v-if="notToken()">登录</el-dropdown-item>
              <el-dropdown-item @click="gotoUserCenter" v-if="disabled">个人中心</el-dropdown-item>
              <el-dropdown-item @click="gotoMerchantCenter" v-if="!disabled">农场信息</el-dropdown-item>
              <el-dropdown-item @click="gotoAddProduce" v-if="!disabled">产品上架</el-dropdown-item>
              <el-dropdown-item @click="gotoManageProduce" v-if="!disabled">产品管理</el-dropdown-item>
              <el-dropdown-item @click="gotoShipmentProduce" v-if="!disabled">订单发货</el-dropdown-item>
              <el-dropdown-item @click="gotoUserShopCar" v-if="disabled">购物车</el-dropdown-item>
              <el-dropdown-item @click="gotoUserBook" v-if="disabled">我的订单</el-dropdown-item>
              <el-dropdown-item @click="removeLoginInfo" divided v-if="!notToken()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <Login :dialog-form-visible=dialogFormVisible @closeDialog="dialogFormVisible = false"></Login>
        <el-avatar shape="square" :size="30" fit="cover" :src="getUseAvatarUrl()" :key="avatarState"/>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import SearchBar from "@/components/bar/SearchBar";
import Login from '@/components/dialog/Login&SignUp'
import {ref, getCurrentInstance, inject} from "vue";
import {Search} from "@element-plus/icons-vue";

export default {
  name: "SearchHeader",
  components: {
    Login,
    SearchBar,
  },
  watch: {
  },
  data(){
    return {
      inputSearch: "",
      avatarState: true,
      userInfo: true,
      disabled: true,
    }
  },
  methods: {
    notToken: function () {
      return localStorage.getItem("token") === null;
    },
    getUseAvatarUrl: function () {
      if (localStorage.getItem("userHeader")) {
        return this.staticResourcesUrl + localStorage.getItem("userHeader");
      } else {
        return require("@/assets/InitAvatar.png");
      }
    },
    getNickName: function () {
      if (localStorage.getItem("userNickname")) {
        return localStorage.getItem("userNickname");
      } else {
        return "用户选项";
      }
    },
    gotoUserShopCar: function () {
      this.$router.push({
        name: 'ShopCar',
      })
    },
    gotoUserBook: function () {
      this.$router.push({
        name: 'BookList',
      })
    },
    gotoUserCenter: function () {
      this.$router.push({
        name: 'UserInfo',
      })
    },
    gotoMerchantCenter: function () {
      this.$router.push({
        name: 'MerchantInfo',
      })
    },
    gotoAddProduce: function () {
      this.$router.push({
        name: 'AddProduce',
      })
    },
    gotoManageProduce: function () {
      this.$router.push({
        name: 'ManageProduce',
      })
    },
    gotoShipmentProduce: function () {
      this.$router.push({
        name: 'ShipmentProduce',
      })
    },
    goHome: function () {
      this.$router.push({
        path: '/',
      })
    },
    refreshAvatar: function () {
      this.avatarState = !this.avatarState;
    },
    refreshUserInfo: function () {
      this.userInfo = !this.userInfo;
    },
    removeLoginInfo: function () {
      localStorage.clear();
      this.$store.commit("clearBookList");
      this.refresh();
      this.goHome();
      this.$tipUtil.successTip("已退出登录");
    }
  },
  setup() {
    const dialogFormVisible = ref(false);
    const { appContext : { config: { globalProperties } } } = getCurrentInstance();
    const staticResourcesUrl = globalProperties.$staticResourcesUrl;
    const refresh = inject("reload");
    return {
      Search,
      dialogFormVisible,
      staticResourcesUrl,
      refresh,
    }
  },
  mounted() {
    this.disabled = localStorage.getItem("identityCode") !== '2';
    let _this = this;
    //根据自己需要来监听对应的key
    window.addEventListener("setItemEvent",function(e){
      //e.key : 是值发生变化的key
      //例如 e.key==="token";
      //e.newValue : 是可以对应的新值
      if(e.key==="userHeader"){
        _this.refreshAvatar();
      } else if (e.key==="identityCode") {
        _this.disabled = e.newValue !== '2';
      } else {
        _this.refreshUserInfo();
      }
    });
  }
}
</script>

<style scoped>
.el-row{
  align-items: stretch;
  min-width: 1280px;
  max-width: 1680px;
  margin: auto;
}
.el-col {
  border-radius: 4px;
}
.logo-box {
  display: flex;
  align-items: center;
  height: 40px;
}
.logo-img {
  height: 40px;
  margin-right: 20px;
  vertical-align: middle;
}
.logo-text {
  font-weight: bold;
  font-size: 20px;
  color: rgb(45, 114, 37);
  font-family: 华文行楷;
}
</style>